<template>
    <view class="xilu">
        <view class="page-foot bg-white" @click="formSubmit()">
            <view class="btn1">确定提现</view>
        </view>
        <view class="container pt30 plr30">
            <view class="xilu_box">
                <view class="fs34 col3 fwb pb30">提现金额</view>
                <view class="xilu_input_box flex-box">
                    <view class="fs40 col3 fwb pl30 pr20">¥</view>
                    <input type="number" placeholder="请输入金额" v-model="withdraw.money" class="flex-grow-1" />
                </view>
                <view class="fs24 col89 pt20">可提现金额<text class="red">¥{{info.money}}</text></view>
            </view>
            <view class="xilu_box">
                <view class="fs34 col3 fwb pb30">提现金额</view>
                <view class="flex-box mb30">
                    <view v-for="(tab,index) in tabList" class="xilu_input_box flex-box plr30 type mr15" :class="(tabIndex==index?'active':'')" @click="bindChange(index)">
                        <view class="fs34 col3 fwb">{{tab.name}}</view>
                    </view>
                   <!-- <view class="xilu_input_box flex-box plr30 type ml15" :class="(tabIndex==1?'active':'')" @click="bindChange(1)">
                        <view class="fs34 col3 fwb">银行卡</view>
                    </view> -->
                </view>
                <template v-if="tabIndex==0">
                    <view class="xilu_input_box flex-box plr30 mb30">
                        <view class="fs34 col3 fwb">支付宝</view>
                         <input type="text" placeholder="请输入支付宝号码" v-model="withdraw.account" class="flex-grow-1 tr" />
                    </view>
                    <view class="xilu_input_box flex-box plr30">
                        <view class="fs34 col3 fwb">姓名</view>
                         <input type="text" placeholder="请输入姓名" v-model="withdraw.username" class="flex-grow-1 tr" />
                    </view>
                </template>
               <template v-else-if="tabIndex==1">
                    <view class="xilu_input_box flex-box plr30 mb30">
                        <view class="fs34 col3 fwb">银行卡</view>
                         <input type="text" placeholder="请输入银行卡号" v-model="withdraw.bank_no" class="flex-grow-1 tr" />
                    </view>
                    <view class="xilu_input_box flex-box plr30 mb30">
                        <view class="fs34 col3 fwb">开户行银行</view>
                         <input type="text" placeholder="请输入开户行银行" v-model="withdraw.bank" class="flex-grow-1 tr" />
                    </view>
					<view class="xilu_input_box flex-box plr30">
					    <view class="fs34 col3 fwb">开户支行</view>
					     <input type="text" placeholder="请输入开户支行" v-model="withdraw.bank_branch" class="flex-grow-1 tr" />
					</view>
                    <view class="xilu_input_box flex-box plr30 mb30">
                        <view class="fs34 col3 fwb">开户行姓名</view>
                         <input type="text" placeholder="请输入开户行姓名" v-model="withdraw.username" class="flex-grow-1 tr" />
                    </view>
                    
                </template>
            </view>
            <view class="col89 pt30 pb20">说明</view>
            <view class="col89 pb20"><text>{{apply.apply_rule}}</text></view>
        </view>
    </view>
</template>

<script>
	var validate = require("../../xilu/validate.js");
    export default {
        data() {
            return {
				tabList:[{id:1,name:'支付宝'},{id:2,name:'银行卡'}],
				tabIndex:0,
				apply:{apply_rule:''},
				info:{
					money:'0.00',
					total_money:'0.00',
					freeze_money:'0.00'
				},
				withdraw:{
					money:'',
					account:'',//支付宝
					username:'',//姓名
					bank_no:'',
					bank:'',
					bank_branch:'',
				}
            };
        },
		onLoad() {
			this.fetchIncome();
			this.fetchConfig()
		},
		methods:{
			fetchConfig(){
				this.$core.post({url: 'xilumarket.config/config',data: {name: 'apply'},success: ret => {
						this.apply = ret.data;
					},fail: err => {}
				});
			},
			fetchIncome(){
				this.$core.post({url: 'xilumarket.user/my_income',data: {user_id: this.userId},success: ret => {
						this.info = ret.data;
					},fail: err => {}
				});
			},
			bindChange(index){
				this.tabIndex = index;
			},
			//提交
			formSubmit() {
			    let formData = this.withdraw;
				formData.type = this.tabList[this.tabIndex].id;
				if(formData.money*100&&this.info.money*100<formData.money*100){
					uni.showToast({
						title:"提现金额大于可提现金额",
						icon:'none'
					});
					return false;
				}
			    var rule = [
					{name: 'money',nameChn: '金额',rules: ['require','gt:0'],errorMsg: {require: '提现金额错误',gt: '提现金额大于0'},},
					{name: 'type',nameChn: '类型',rules: ['require'],errorMsg: {require: '请选择提现类型'},},
					{name: 'username',nameChn: '姓名',rules: ['require'],errorMsg: {require: '请填写姓名'},},
					];
					if(formData.type == 1){
						rule.concat([
							{name: 'account',nameChn: '支付宝',rules: ['require'],errorMsg: {require: '请填写支付宝账号'},}
						])
					}else{
						rule.concat([
							{name: 'bank_no',nameChn: '卡号',rules: ['require'],errorMsg: {require: '请填写卡号'},},
							{name: 'bank',nameChn: '开户行',rules: ['require'],errorMsg: {require: '请填写开户行'},},
							{name: 'bank_branch',nameChn: '开户支行',rules: ['require'],errorMsg: {require: '请填写支行'},},
							
						])
					}
			    // 是否全部通过，返回Boolean
				//console.log(validate.check(formData,rule),validate.getError(),formData);
			
				if(!validate.check(formData,rule)){
					uni.showToast({title: validate.getError()[0],icon:'none'});
					return ;
				}
				this.$core.post({url:'xilumarket.user/withdraw',data:formData,success:ret=>{
					this.getOpenerEventChannel().emit('withdrawSuccess',ret.data);
					uni.navigateBack({});
					uni.showToast({title: ret.msg,icon:'none'});
				}})
			}
		}
    }
</script>

<style lang="scss" scoped>
    .xilu {
        .container {
            height: 100vh;
            background: #F7F9FC;
        }

        &_box {
            background: #FFFFFF;
            box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(183, 189, 202, 0.1);
            border-radius: 20rpx;
            padding: 30rpx;
            margin-bottom: 30rpx;
        }

        &_input_box {
            width: 630rpx;
            height: 90rpx;
            background: #F7F9FC;
            border-radius: 10rpx;
        }

        &_input_box.type::before {
            content: "";
            display: block;
            width: 30rpx;
            height: 30rpx;
            background: url("/static/icon/choose.png") no-repeat center;
            background-size: 100%;
            margin-right: 10rpx;
        }

        &_input_box.type.active::before {
            content: "";
            display: block;
            width: 30rpx;
            height: 30rpx;
            background: url("/static/icon/choose-on.png") no-repeat center;
            background-size: 100%;
            margin-right: 10rpx;
        }
    }
</style>